<template>
    <div class="product">
        <div class="product_img">
            <img :src="`http://www.dell-lee.com/imgs/vue3/${productInfo.imgName}.png`" alt="">
        </div>
        <div class="product_content">
            <div class="product_content_title">{{ productInfo.title }}</div>

            <div class="product_content_price">￥{{ productInfo.price }} <span class="product_content_old_price">￥{{
                productInfo.oldPrice }}</span></div>

        </div>
        <div class="product_number">
            <span class="product_number_minus" @click="addred(-1)">-</span>
            {{ productInfo.number }}
            <span class="product_number_plus" @click="addred(1)">+</span>
        </div>
    </div>
</template>
<script setup>
import {useCartStore} from '@/stores/cart';
const cartStore = useCartStore()
const { productInfo, shopid } = defineProps(['productInfo', 'shopid'])



function addred(i) {
    let byidcart = cartStore.cartList.find(e => e.shopid == shopid)
    if (!byidcart) {
        cartStore.cartList.push({ shopid, product: [] })
        byidcart = cartStore.cartList.find(e => e.shopid == shopid)
    }

    let byidproduct = byidcart.product.find(e => e.id == productInfo.id)
    if (!byidproduct) {
        byidcart.product.push(productInfo)
        byidproduct = byidcart.product.find(e => e.id == productInfo.id)
    }
    productInfo.number + i < 0 ? i = 0 : i
    productInfo.number += i
    byidproduct.number=productInfo.number
    console.log(cartStore.cartList);
}



</script>

<style lang="scss" scoped>
@import '@/style/viriables.scss';
@import '@/style/mixins.scss';

.product {
    padding: .18rem;
    box-sizing: border-box;
    display: flex;
    position: relative;
    border-bottom: .01rem solid $content-bgColor;

    &_img {
        width: .68rem;
        margin-right: .18rem;

        img {
            width: .68rem;
            height: .68rem;
        }
    }

    &_img--min {
        width: .48rem;
        margin-right: .18rem;

        img {
            width: .48rem;
            height: .48rem;
        }
    }

    &_content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        &_title {
            font-size: .14rem;
            font-weight: bold;
            color: $content_fontcolor;
            @include ellipse;
        }

        &_price {
            color: $hightlight-fontColor;
        }

        &_old_price {
            color: $light-fontColor;
            text-decoration: line-through;
        }
    }

    &_number {
        position: absolute;
        right: .18rem;
        bottom: .18rem;

        &_minus,
        &_plus {
            display: inline-block;
            width: .2rem;
            height: .2rem;
            border-radius: 50%;
            font-size: .16rem;
            text-align: center;
        }

        &_minus {
            border: .01rem solid $medium-fontColor;
            color: $medium-fontColor;
            margin-right: .08rem;
        }

        &_plus {
            background-color: $btn-bgColor;
            color: $bgColor;
            margin-left: .08rem;
        }
    }
}
</style>